<template>
  <div class="comment">
    <div class="submitbox">
      <h3>提交评论</h3>
      <div>
        <mt-field placeholder="请输入评论内容" v-model="content" type="textarea" rows="4"></mt-field>
        <mt-button @click="handlePost" type="primary" plain>发表</mt-button>
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line">评论详情</h3>
      <ul>
        <li v-for="(item, index) in commentList" :key="index">
          <h4 class="comment-content">{{item.content}}</h4>
          <p>
            <span class="comment-user">{{item.user_name}}</span>
            <span class="comment-time">{{item.add_time | filterTime}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <!-- 2.1 加载更多click事件绑定 -->
      <mt-button type="primary" size="large" @click="loadMore" v-if="hasMore">加载更多</mt-button>
      <mt-button type="danger" size="large" disabled v-else>没有更多了</mt-button>
    </div>
  </div>
</template>
<script>
import { getComment, postComment } from '@/api'
import { Toast } from 'mint-ui'
import qs from 'qs'
export default {
  data () {
    return {
      // 评论列表数据
      commentList: [],
      pageindex: 1, // 展示数据页面，默认第一页
      hasMore: true, // 是否有更多
      content: '' // 保存评论内容
    }
  },
  props: ['id'],
  created () {
    this.initComment()
  },
  methods: {
    // 初始化评论数据
    initComment () {
      // console.log(typeof this.id)
      getComment(parseInt(this.id), this.pageindex).then(res => {
        // 2.3 请求回来的新数据，应该追加到原来的数据后面
        let newList = res.message // 请求回来的新数据
        let oldList = this.commentList // 旧数据
        // 2.7 当返回回来的新数据没有10的时候，我就判断它没有更多 (因为后台没有返回total，前台无法判断有多少页。所以下面的判断条件不合理，只是临时处理的)
        if (newList.length < 10) {
          this.hasMore = false
        }
        // 2.4 新旧数组合并，将合并之后的新数组赋值给commentList
        this.commentList = [...oldList, ...newList]
      })
    },
    // 加载更多方法
    loadMore () {
      // 2.2 加载更多时让页面数加1
      this.pageindex += 1
      this.initComment()
    },
    // 3.1 点击发表
    handlePost () {
      let postData = { content: this.content }
      // 3.2 后台需要postData是这种格式  content='xxxx'& , 所以现在需要将postData转换一下数据格式
      postData = qs.stringify(postData)

      // 3.5 提交请求之前先对内容进行校验
      if (!this.content.trim()) {
        Toast({
          message: '请输入内容后再提交',
          iconClass: 'iconfont icon-checkbox-blank-circle-outline'
        })
        return false
      }
      postComment(this.id, postData).then(res => {
        if (res.status === 0) {
          // 3.3 弹出提示信息，给输入框清空，刷新数据
          Toast({
            message: '提交成功',
            iconClass: 'iconfont icon-checkbox-marked-circ'
          })
          this.content = ''
          // 3.4 调用初始化数据方法前应该先将老数据清空,请求页码重置为第一页
          this.pageindex = 1
          this.commentList = []
          this.initComment()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputbox {
    border: 1px solid #999;
  }
  .comment h3 {
    font-weight: bold;
    margin: 10px 0;
    font-size: 14px;
  }
  .line {
    border-top: 1px solid #999;
    padding-top: 10px;
  }
  .commentbox {
    li:not(:last-child) {
      border-bottom: 1px solid #999;
      margin: 5px 0;
    }
    p {
      font-size: 14px;
    }
    .comment-content {
      color: #999;
      font-size: 14px;
    }
  }
  .comment-user,
  .comment-time {
    font-size: 12px;
    color: #26a2ff;
  }
</style>
